<template>
  <div class="left">
    <cardmodel :width="460" :height="494" :imgUrl="backgroundImage">
      <div class="left_introduc">
        <div class="left_introduc-logo">
          <img src="../../assets/home/logo.png" alt="" />
        </div>
        <div class="left_introduc-main">{{ bannerData.companyName }}</div>
        <div class="left_introduc-vice">{{ bannerData.locatedName }}</div>
        <el-divider content-position="center">{{
          bannerData.postNameList && bannerData.postNameList[0]
        }}</el-divider>
        <div class="left_introduc-info">
          <div class="left_introduc-info-img">
            <img :src="bannerData.avatar" alt="" />
          </div>
          <div class="left_introduc-info-name">{{ bannerData.nickName }}</div>
          <div class="left_introduc-info-phone">
            {{ bannerData.phoneNumber }}
          </div>
        </div>
        <div class="left_introduc-time">
          <div class="left_introduc-time-row">系统管理员您好~</div>
          <!-- <div>上班打卡时间 09:00 下班打卡时间 17:00</div> -->
        </div>
      </div>
    </cardmodel>

    <cardmodel
      :width="460"
      :height="410"
      :title="'签到统计'"
      :titleIconUrl="signIcon"
    >
      <div class="left_sign">
        <div ref="echartsRef" style="width: 100%; height: 240px"></div>

        <div class="left_sign-row">
          <div class="left_sign-row-item total">
            <div class="label">签到总人数</div>
            <div class="num">{{ signData.signInPersonNum }}</div>
          </div>
          <div class="left_sign-row-item no">
            <div class="label">未签到人数</div>
            <div class="num">{{ signData.notSignInPersonNum }}</div>
          </div>
        </div>
      </div>
    </cardmodel>
  </div>
</template>

<script setup name="Left">
import cardmodel from "./components/cardmodel.vue";
import { ref, onMounted, nextTick, shallowRef } from "vue";
import backgroundImage from "@/assets/home/bg.png";
import signIcon from "@/assets/home/signIcon.png";
import { getBannerDataApi, getSignInCountApi } from "@/api/home/index";
import * as echarts from "echarts";
import moment from "moment";

const bannerData = ref({});
const signData = ref({});
const chart = shallowRef(null);
const echartsRef = ref(null);
const option = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    right: 20,
  },
  grid: {
    bottom: 25,
    left: 80,
  },
  xAxis: {
    type: "category",
    axisTick: {
      alignWithLabel: true, // 设置刻度线与标签对齐
    },
    data: [],
    boundaryGap: true,
  },
  yAxis: {
    type: "category",
    name: "时间",
    boundaryGap: false,
    nameTextStyle: {
      color: "#1E1E2C",
      fontSize: 14,
      fontWeight: "bold",
    },
    axisTick: {
      alignWithLabel: true, // 设置刻度线与标签对齐
    },
    axisLine: {
      onZero: false, // 让Y轴线不在0刻度上
    },
    data: [],
  },
  series: [
    {
      name: "签到时间",
      type: "bar",
      data: ["10:03:07", "11:43:06", "15:57:40"],
      barWidth: "15px",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#5C4FFF",
          },
          {
            offset: 1,
            color: "#5DCEFC",
          },
        ]),
      },
    },
  ],
});

onMounted(() => {
  nextTick(() => {
    chart.value = echarts.init(echartsRef.value);
    chart.value.setOption(option.value);
  });
});

/**
 * 左侧banner图数据
 */
const getBannerData = () => {
  getBannerDataApi().then((res) => {
    if (res.code == 200) {
      bannerData.value = res.data;
      bannerData.value.avatar =
        import.meta.env.VITE_APP_BASE_API + res.data.avatar;
    } else {
      bannerData.value = {};
    }
  });
};
getBannerData();

const getSignInCount = () => {
  option.value.xAxis.data = [];
  option.value.yAxis.data = [];
  option.value.series[0].data = [];
  getSignInCountApi().then((res) => {
    if (res.code == 200) {
      signData.value = res.data;

      res.data.signInTimeRecords
        ? res.data.signInTimeRecords.map((item) => {
            option.value.xAxis.data.push(item.userName);
            option.value.yAxis.data.push(item.signInTime);
            option.value.series[0].data.push(item.signInTime);
          })
        : "";

      option.value.yAxis.data.unshift("00:00:00");
      option.value.yAxis.data.push("23:59:59");
      chart.value.setOption(option.value);
    } else {
      signData.value = {};
    }
  });
};
getSignInCount();
</script>

<style scoped lang="scss">
.left {
  width: 460px;
  margin-right: 14px;
  &_introduc {
    display: flex;
    flex-direction: column;
    align-items: center;
    &-logo {
      width: 90px;
      height: 90px;
      background: #ffffff;
      border-radius: 10px;
      text-align: center;
      line-height: 90px;
      & > img {
        width: 80px;
        height: 80px;
      }
    }

    &-main {
      color: #181a1d;
      margin-top: 41px;
    }

    &-vice {
      font-weight: 500;
      font-size: 17px;
      color: #a9b0b8;
      margin-top: 14px;
      margin-bottom: 25px;
    }

    &-info {
      display: flex;
      align-items: center;

      &-img {
        width: 70px;
        height: 70px;
        background: #f4f6fa;
        border-radius: 6px;
        margin-left: -140px;

        & > img {
          width: 70px;
          height: 70px;
          border-radius: 6px;
        }
      }

      &-name {
        font-weight: bold;
        font-size: 19px;
        color: #181a1d;
        margin-left: 23px;
        margin-right: 13px;
      }

      &-phone {
        font-weight: 500;
        font-size: 17px;
        color: #a9b0b8;
        margin-top: 3px;
      }
    }

    &-time {
      width: 100%;
      height: 99px;
      box-shadow: 0px 1px 2px 0px #dff0ff;
      border-radius: 10px;
      background: rgb(223, 240, 255, 0.5);
      margin-top: 29px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      font-size: 15px;
      color: #181a1d;

      &-row {
        margin-bottom: 10px;
      }
    }
  }

  &_sign {
    &-row {
      display: flex;
      justify-content: center;
      margin-top: 20px;

      &-item {
        width: 141px;
        height: 60px;
        border-radius: 6px;
        padding: 12px 18px;

        .label {
          font-weight: bold;
          font-size: 10px;
          color: #6f747a;
          margin-bottom: 8px;
        }

        .num {
          font-weight: bold;
          font-size: 16px;
          color: #070809;
        }
      }

      .total {
        // background: linear-gradient(180deg, #e9edf3 0%, #fafbfc 100%);
        margin-right: 5px;
        background: url("../../assets/home/total-panel.png") no-repeat;
      }

      .no {
        // background: linear-gradient(180deg, #e5eeff 0%, #f9fbff 100%);
        margin-left: 5px;
        background: url("../../assets/home/no-panel.png") no-repeat;
      }
    }
  }
}

:deep(.el-divider__text) {
  background-color: rgb(255, 255, 255, 0);
  font-weight: 500;
  font-size: 16px;
  color: #80868e;
}
</style>
